<template>
	<view class="content">
		<view class="list row" v-for="(item,i) in layoutInfos" :key="i" @click="goApply(item)">
			<view class="pic">
				<image class="img" :src="item.picUrl"></image>
				<view class="full" v-if="item.isFullRoom">满房</view>
			</view>
			<view class="roomMess">
				<view class="name">{{item.layoutName}}</view>
				<view class="area">{{item.houseTypeName}} | {{item.spaceMax}}㎡</view>
				<!-- <view class="tabbox">
					<text class="tab" :class="tag.tag" v-for="(tag,k) in item.room_tags">{{tag.value}}</text>
				</view> -->
				<view class="price">
					<text class="yellow">{{item.price}}</text>元/月起
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { getApartmentInfo } from '@/common/API/room'
const layoutInfos = ref([])
const roomId = ref()

onLoad((options)=>{
	roomId.value = options.roomId
	getDetail()
})

const getDetail = async ()=> {
	let data = {
		apartmentId: roomId.value
	};
	let res = await getApartmentInfo(data);
	layoutInfos.value = res.layoutInfos
	layoutInfos.value = res.layoutInfos.map(item=>{
		return {
			...item,
			picUrl: item.picUrl?item.picUrl.split(',')[0]:''
		}
	})
}

const goApply = (item)=>{
	if(item.isFullRoom){
		uni.showToast({
			title: '此房型已满房，不可预约',
			icon: 'none'
		})
	}else{
		uni.navigateTo({
			url:`roomLookApply?apartmentId=${roomId.value}&layoutId=${item.layoutId}`
		});
	}
}
</script>

<style lang="scss" scoped>
.content{
	.list{
		padding: 28rpx 32rpx;
		align-items: flex-start;
		background: #fff;
		margin-top: 8rpx;
		.pic{
			width: 242rpx;
			height: 184rpx;
			margin-right: 34rpx;
			border-radius: 8rpx;
			overflow: hidden;
			position: relative;
			.full{
				position: absolute;
				top: 0;
				left: 0;
				width: 242rpx;
				height: 184rpx;
				background: rgba(0, 0, 0, 0.4);
				color: #fff;
				line-height: 184rpx;
				text-align: center;
			}
		}
		.roomMess{
			flex: 1;
			.name{
				font-size: 32rpx;
				line-height: 42rpx;
				font-weight: bold;
			}
			.area{
				line-height: 32rpx;
				margin: 12rpx 0 6rpx;
			}
			.tabbox{
				font-size: 24rpx;
				.tab{
					margin-right: 10rpx;
					border-radius: 8rpx;
					color: #A68868;
					background: #F5F2F0;
					line-height: 44rpx;
					padding: 0 10rpx;
					font-size: 24rpx;
					&:last-child{
						margin: 0;
					}
				}
			}
			.price{
				font-size: 24rpx;
				color: #666;
				line-height: 48rpx;
				margin-top: 20rpx;
				.yellow{
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
